<template>
  <div class="contentBox">
    <el-card class="box-card">
      <el-tabs v-model="activeName">
        <el-tab-pane label="文字链接" name="first">
          <el-table
            :data="textTableData"
            style="width: 100%; margin: 20px 0"
            row-key="id"
            border
            :tree-props="{ children: 'children' }"
          >
            <el-table-column
              prop="title"
              label="#"
              sortable
              width="40"
              type="index"
            />
            <el-table-column prop="title" label="标题" sortable width="400">
            </el-table-column>
            <el-table-column prop="des" label="链接描述" sortable width="180">
            </el-table-column>
            <el-table-column prop="type" label="链接类型"> </el-table-column>
            <el-table-column prop="url" label="链接地址"> </el-table-column>
            <el-table-column
              prop="component"
              label="操作"
              width="300"
              align="center"
            >
              <template #default="{ row }">
                <el-button
                  type="primary"
                  icon="el-icon-edit"
                  circle
                ></el-button>
                <el-button
                  type="danger"
                  icon="el-icon-delete"
                  circle
                  @click="delMenu(row.id)"
                ></el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="图片链接" name="second">
          <el-table
            :data="imgTableData"
            style="width: 100%; margin: 20px 0"
            row-key="id"
            border
            :tree-props="{ children: 'children' }"
          >
            <el-table-column
              prop="title"
              label="#"
              sortable
              width="40"
              type="index"
            />
            <el-table-column prop="des" label="链接描述" sortable width="400">
            </el-table-column>
            <el-table-column prop="img" label="链接图片" sortable width="180">
            </el-table-column>
            <el-table-column prop="type" label="链接类型"> </el-table-column>
            <el-table-column prop="url" label="链接地址"> </el-table-column>
            <el-table-column
              prop="component"
              label="操作"
              width="300"
              align="center"
            >
              <template #default="{ row }">
                <el-button
                  type="primary"
                  icon="el-icon-edit"
                  circle
                ></el-button>
                <el-button
                  type="danger"
                  icon="el-icon-delete"
                  circle
                  @click="delMenu(row.id)"
                ></el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import { getLinkListAPI } from '@/api/IdsMange/link'
export default {
  name: 'friendslink',
  data () {
    return {
      activeName: 'first',
      formData: {
        type: '',
        page: '1',
        limit: '5'
      },
      textTableData: [],
      imgTableData: []
    }
  },
  methods: {
    async getLinkList () {
      const { data } = await getLinkListAPI({ ...this.formData, type: '1' })
      const { data: res } = await getLinkListAPI({
        ...this.formData,
        type: '2'
      })
      this.textTableData = data.data
      this.imgTableData = res.data
      console.log('友情链接数据:', res)
    }
  },
  created () {
    this.getLinkList()
  }
}
</script>

<style lang="scss" scoped>
.contentBox {
  padding: 10px 20px;
}
</style>
